import { Button } from 'antd';
import { saveAs } from 'file-saver';
import { useDispatch } from 'umi';

import type { FC } from 'react';

import banner from '@/assets/banner.png';
import BaseDiv from '@/components/baseDiv';
import ClientsInfo from '@/components/clientsInfo';
import { namespace } from '@/models/global';
import Product from '@/pages/Product';

import Info from './components/info';
import Info1 from './components/info1';
import Problems from './components/problems';
import ProfitReturn from './components/profitReturn';
import { Safe } from './components/safe';
import styles from './index.less';

const FirstPage: FC = () => {
  const dispatch = useDispatch();
  const baseStyles: React.CSSProperties = {
    height: 586,
    background: `url(${banner}) no-repeat`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  };

  const dataArr: string[] = [
    '把云安灯系统整体部署到您的企业内网服务器上',
    '同时支持个性化的定制开发',
    '我们还提供7*24小时的全天候技术支持服务',
  ];

  const handleUsePro = () => {
    dispatch({
      type: `${namespace}/setCurrentMenu`,
      payload: 'price',
    });
  };
  return (
    <>
      <BaseDiv baseStyles={baseStyles} boxStyles={{ display: 'flex' }}>
        <div className={styles.Body}>
          <div className={styles.contentBody}>
            <div className={styles.text1}>异常事件的快速响应</div>
            <div className={styles.text2}>芍园科技——云安灯</div>
            <div className={styles.content}>
              一个基于私有云平台提供异常事件的收集、通知、处理、监控、报告与分析的综合性应用系统。帮助制造建立异常事件的快速响应机制，提升执行效率。
            </div>
          </div>
          <div className={styles.buttonBody}>
            <Button
              onClick={() => {
                handleUsePro();
              }}
              type="primary"
              className={styles.order}
            >
              立刻订购
            </Button>
            <Button
              onClick={() => {
                handleUsePro();
              }}
              className={styles.trail}
              type="default"
            >
              免费试用
            </Button>
            <Button
              onClick={() => {
                saveAs('/api/Asset/Download/2022040114493015743512888266752', '安灯移动端.apk');
              }}
              className={styles.trail}
              type="default"
            >
              下载App
            </Button>
          </div>
        </div>
        <div className={styles.Body} />
      </BaseDiv>
      <Problems />
      <Info />
      <ProfitReturn />
      <Product/>
      <Safe dataSource={dataArr} title={'私有云部署，更安全，更高效！'} />
      <ClientsInfo />
      <Info1 />
    </>
  );
};

export default FirstPage;
